<template>
    <div class="comm-carousel" @touchstart.stop="handleStart"  @touchend.stop="handleEnd" @mousedown.stop="handleStart" @mouseup.stop="handleEnd" >
        

        <v-carousel
        :continuous="false"
        :cycle="cycle"
        :show-arrows="false"
        hide-delimiter-background
        delimiter-icon="mdi-minus"
        height="100%"
        >
        <v-carousel-item
            v-for="item in bannerData" :key="item.bannerId"
        >
            <v-sheet
            height="100%"
            tile
            >
            <v-row
                class="fill-height"
                align="center"
                justify="center"
            >
                <div class="medium" @click="handleClick(item)">
                    <img :src="item.pic"/>
                    <span class="adtag" :class="item.titleColor" v-if="item.showAdTag" >{{item.typeTitle}}</span>
                </div>
            </v-row>
            </v-sheet>
        </v-carousel-item>
        </v-carousel>
    </div>
</template>

<script>
import api from '@/api/index'
import {realPx, getSomeData} from '@/utils/utils.js' 
export default {
    name: 'commCarousel',

    computed: {
        height(){
            return realPx(140) + 'px';
        }
    },
    data(){
        return {
            bannerData: [],
            offset: 0,
            cycle: true
        }
    },
    methods: {
        handleStart (e) {
             if(!e.changedTouches || e.changedTouches.length == 0) return;
             var x = e.changedTouches[0].clientX;
             if(x){
                this.offset = x;
             }
        },

        handleEnd (e) {
            if(!e.changedTouches || e.changedTouches.length == 0) return;
            var x = e.changedTouches[0].clientX;

            if((x - this.offset) > 60 ){
                // 从左往右滑
                
                
                this.$refs.carousel.prev();
            }else if((x- this.offset) < -60 ){
                // 从右往左滑
                this.$refs.carousel.next();
            }

            this.offset = 0;
        },

        handleClick (data) {
            if(data.showAdTag && data.titleColor == 'blue'){
                this.$message({
                    type: 'info',
                    message: '暂不提供活动等其他类型的外部链接'
                })
                return 
            }
            this.$emit('detail-click', data);
            

        },

        handleChange (e) {
            this.$emit('change', e)
        }

    },

    mounted(){
        
        getSomeData({
            alias: 'banner'
        }, api.getBanner).then(res => {
            this.bannerData = res.data.banners.map(item => {
                item.pic = item.pic + '?imageView&thumbnail=396y154&quality=75&tostatic=0';
                return item;
            });
        })
    }
}
</script>

<style lang="scss" scoped>
    @import '@/assets/styles/global';
    .comm-carousel {
        background: rgba(0,0,0,.3);
        height: px2rem(140);
        border-radius: px2rem(8);
        overflow: hidden;
        margin-top: px2rem(10);
        .medium {
            background: #333;
            height: 100%;
            position: relative;
            img {
                width: 100%;
                height: 100%;
            }

            .adtag {
                position: absolute;
                right: 0;
                bottom: 0;
                border-radius: px2rem(10) 0 0 0;
                padding: px2rem(4) px2rem(10);
                color: #fff;
                @include defaultFontSize;

                &.blue {
                    background: #5376eb;
                }

                &.red {
                    background : #e55a5a;
                }
            }

        }
            
    }

    
</style>